<template>
    <div>
        <div class="edittable-table-height-con">
            <Table :columns="slideTableHead" :data="memberWalletList" border :no-filtered-data-text="tipeNews" :no-data-text="tipeNews" ref="slideTableHead"></Table>
        </div>
        <Page :total="total" :current="page" :page-size="pageSize" @on-change="onCurrentChange" style="text-align: center"></Page>
        <Modal v-model="option1.modelTankan" :title="option1.reOrWiMoney" width="260" @on-ok="handleSubmit()" @on-cancel="handleReset()">
            <InputNumber :max="20000" :min="1" v-model="RechargeOrWiMoney" ></InputNumber>
        </Modal>
        <Modal v-model="historyTanKuan" @on-ok="submit()" @on-cancel="quxiao()">
            <div v-if="memberHistoryList.length>0">
                <div v-for="item in memberHistoryList" class="item-table">
                    <div><span class="wai_model"><label class="nei_model">*
                    </label>类型: </span>
                        <label style="text-decoration:underline;" v-if="item.type===0">提现</label>
                        <label style="text-decoration:underline;" v-else-if="item.type===1">充值</label>
                    </div>
                    <div><span class="wai_model"><label class="nei_model">* </label>金额: </span><label style="text-decoration:underline;">{{item.money}}</label></div>
                    <div><span class="wai_model"><label class="nei_model">* </label>时间: </span><label style="text-decoration:underline;">{{item.time}}</label></div>
                    <div><span class="wai_model"><label class="nei_model">* </label>注解: </span><label style="text-decoration:underline;">{{item.details}}</label></div>
                </div>
            </div>
            <div v-else>{{tipeNews}}</div>
        </Modal>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                //表头
                slideTableHead:[
                    {
                        title: '编号',
                        align: 'center',
                        key: 'mIdNo',
                        "sortable": true,
                    },
                    {
                        title: '昵称',
                        align: 'center',
                        key: 'nickName',
                    },
                    {
                        title: '余额',
                        align: 'center',
                        key: 'money',
                        "sortable": true,
                    },
                    {
                        title: '直播间收益',
                        align: 'center',
                        key: 'LE',
                    },
                    {
                        title: '礼物收益',
                        align: 'center',
                        key: 'GE',
                    },
                    {
                        title: '可提现收益',
                        align: 'center',
                        key: 'AE',
                    },
                    {
                        title: '支付宝',
                        align: 'center',
                        key: 'alipay',
                    },
                    {
                        title: '微信',
                        align: 'center',
                        key: 'weixin',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'success',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.toRecharge(params.index)
                                        }
                                    }
                                }, '充值'),
                                h('Button', {
                                    props: {
                                        type: 'warning',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.toWithdrawals(params.index)
                                        }
                                    }
                                }, '提现'),
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.toSeekHistory(params.index)
                                        }
                                    }
                                }, '查看记录')
                            ]);
                        }
                    }
                ],
                selectURl:'/wallet/list',
                toSeekHistoryURl:'/wallet/his/',
                toRechargeOrWiURl:'/wallet/recharge',
                tipeNews:'暂无数据',
                memberWalletList:[],
                option1: {
                    modelTankan: false,
                    reOrWiMoney: '',
                },
                memberWalleModel:{},
                RechargeOrWiMoney:0,
                flooag:false,
                memberHistoryList:[],
                historyTanKuan:false,
                total:0,
                pageSize:0,
                page:1,
            }
        },
        created () {
            this.getData();
        },
        methods: {
            //初始化时获取数据
            getData () {
                let self = this;
                self.$axios.get(self.selectURl + '?curr=' + self.page).then((res) => {
                    self.memberWalletList = res.data.data.rows;
                    self.memberWalleModel={};
                    self.page = res.data.data.page;
                    self.pageSize = res.data.data.pagesize;
                    self.total = res.data.data.total;
                })
            },
            //去充值
            toRecharge(index){
                let self=this;
                self.memberWalleModel = self.memberWalletList[index];
                self.flooag = true;
                self.option1.reOrWiMoney = '会员充值';
                self.option1.modelTankan = true;
            },
            //去提现
            toWithdrawals(index){
                let self=this;
                if (self.memberWalletList[index].AE > 0){
                    self.flooag = false;
                    self.memberWalleModel = self.memberWalletList[index];
                    self.option1.reOrWiMoney = '会员提现';
                    self.option1.modelTankan = true;
                }else{
                    self.error("改会员可提现金额为0，无法提现！！！");
                }
            },
            handleSubmit(){
                let self=this;
                if (self.flooag){
                    self.$axios.post(self.toRechargeOrWiURl + '?mId=' + self.memberWalleModel.mId+'&money='+self.RechargeOrWiMoney+'&flag=1').then((res) => {
                        if (res.data.code==200){
                            self.$Message.success('恭喜您，充值成功');
                            self.option1.modelTankan = false;
                            this.getData();
                        }else if(res.data.code!=200){
                            debugger;
                            self.$Message.error('抱歉，充值失败。请稍后重试!');
                            self.option1.modelTankan = false;
                            this.getData();
                        }
                    })
                }else{
                    self.$axios.post(self.toRechargeOrWiURl + '?mId=' + self.memberWalleModel.mId+'&money='+self.RechargeOrWiMoney+'&flag=0').then((res) => {
                        if (res.data.code==200){
                            self.$Message.success('恭喜您，提现成功');
                            self.option1.modelTankan = false;
                            this.getData();
                        }else if(res.data.code!=200){
                            self.$Message.error('抱歉，提现失败。请稍后重试!');
                            self.option1.modelTankan = false;
                            this.getData();
                        }
                    })
                }

            },
            handleReset(){
                let self=this;
                self.memberWalleModel =0;
                self.option1.modelTankan = false;
            },
            //去查看历史记录
            toSeekHistory(index){
                let self=this;
                self.$axios.get(self.toSeekHistoryURl + '/' + self.memberWalletList[index].mId).then((res) => {
                    for (var i = 0;i<res.data.data.length;i++){
                        let time = new Date(res.data.data[i].time).toLocaleString();
                        res.data.data[i].time = time;
                    }
                    self.memberHistoryList = res.data.data;
                    self.historyTanKuan = true;
                })
            },
            submit(){
                let self=this;
                self.memberHistoryList=[];
                self.historyTanKuan = false;
            },
            quxiao(){
                let self=this;
                self.memberHistoryList=[];
                self.historyTanKuan = false;
            },
            //错误提醒
            error (nodesc) {
                this.$Notice.error({
                    title: '错误通知',
                    desc: nodesc
                });
            },
            onCurrentChange(val){
                let self = this;
                self.page = val;
                self.getData();
            }

        }
    }
</script>
<style>
    .wai_model{
        display: inline-block;
        width: 100px;
        text-align: right;
        padding-right: 20px;
    }
    .nei_model{
        color: red;
        width: 130px;
    }
    .item-table{
        border-bottom: 1px solid #d7d4f0;
        padding: 5px;
    }
    .item-table:last-child{

    }
</style>